<template>
	<view>
		<!-- 职业 -->
		<picker-view :indicator-style="indicatorStyle" class="picker-view" @change="change">
			<picker-view-column>
				<view class="item" v-for="(item,index) in province" :key="index">{{item.name}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in city" :key="index">{{item.name}}</view>
			</picker-view-column>
		</picker-view>

		<view class="bomPosition">
			<button type="primary" @click="preserve">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorStyle: `height: 50px;`,
				province: [],
				city: [],
				value: [0, 0],
			};
		},
		onLoad() {
			this.provinceList()
		},
		methods: {
			preserve() {
				let careerItem = this.city[this.value[1]]
				console.log(careerItem);
				let obj = {
					title:careerItem.name,
					career_id:careerItem.id,
				}
				uni.$emit('career',obj)
				uni.navigateBack({
					delta:1
				})
			},
			
			change(e) {
				if (this.value[0] != e.detail.value[0]) {
					this.cityList(this.province[e.detail.value[0]].id)
				} else {}
				this.value = e.detail.value
			},
			provinceList() {
				this.$api.sendRequest({
					url: '/api/Index/careerList',
					data: {
						pid: ''
					},
					success: res => {
						this.province = res.data
						this.cityList(res.data[0].id)
					}
				})
			},
			cityList(id) {
				this.$api.sendRequest({
					url: '/api/Index/careerList',
					data: {
						pid: id || ''
					},
					success: res => {
						this.city = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
		background-color: #f6f6f6 !important;
		/deep/ picker-view-column {
			background-color: #f6f6f6 !important;
		}
	}
	/deep/ picker-view-column {
		background-color: #f6f6f6 !important;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
		font-weight: 600;
		font-size: 32rpx;
	}
</style>
